<template>
    <el-dialog :append-to-body="true" v-model="visible" width="366" :before-close="handleClose"
        class="close-client-dialog" center>
        <div v-if="status == 1">
            <div class="content">
                <h3>关闭客户端</h3>
                <p>检测到您有游戏正在运行，关闭客户端将直接退出当前游戏</p>
            </div>
        </div>
        <div v-if="status == 2">
            <div class="content">
                <h3>结束游戏</h3>
                <p>退出后云电脑将关机，所有记录将被清空，确定退出吗？</p>
            </div>
        </div>
        <div v-if="status == 3">
            <div class="content">
                <h3>切换游戏</h3>
                <p>切换游戏将关闭当前正在运行的游戏，是否切换?</p>
            </div>
        </div>

        <template #footer>
            <span class="dialog-footer" v-if="status == 1">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="handleClose()">确定</el-button>
            </span>
            <span class="dialog-footer" v-if="status == 2">
                <el-button @click="visible = false">我还要玩</el-button>
                <el-button type="warning" @click="visible = false">结束</el-button>
            </span>
            <span class="dialog-footer" v-if="status == 3">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="handleClose()">确定</el-button>
            </span>


        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'

// 1: 关闭客户端
// 2: 结束游戏
// 3: 切换游戏


// Props
const props = defineProps({
    someQueryParam: {
        type: Object,
        default: () => ({})
    },
    modelValue: {
        type: Boolean,
        default: false
    },
    status: {
        type: Number,
        default: 1
    }
})



// Refs
const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})

// 方法
const handleClose = () => {
    emit('close', props.status)
}


// Emits
const emit = defineEmits(['update:modelValue', 'close'])


</script>


<style lang="scss">
.close-client-dialog {
    .el-dialog__header {
        padding: 20px !important;

        .el-dialog__title {
            color: #fff;
        }
    }

    .el-dialog__body {
        padding: 0 40px;

        h3 {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
        }

        p {
            margin: 20px 0;
            color: #888;
            font-size: 14px;
        }

        .cs-button {
            margin: 10px 0;
        }


    }

    .el-dialog__footer {
        padding-top: 0 !important;
        padding-bottom: 38px;

        .el-button {
            width: 135px;
            height: 50px;
            background: #232527;
            border: #232527;
            color: #e2e2e2;
            font-size: 14px;
            font-weight: bold;

            &.el-button--primary {
                background: #ffe500;
                border-color: #ffe500;
                color: #121212;
            }

            &.el-button--warning {
                background: #d55928;
                border-color: #d55928;
                color: #fff;
            }
        }
    }
}
</style>
